<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./lib/bnner/slider.css">
    <link rel="stylesheet" href="./lib/zoom/magnifier.css">
    <link rel="stylesheet" href="./css/details.css">
    <title>产品详情</title>
</head>
<body>
        <!-- 头部 -->
        <header>
            <!-- 顶部导航 -->
            <div class="top-backimg">
                <div class="top-main container cf">
                    <span class="fl">legochina.cn</span>
                    <span class="bf fr">
                        欢迎光临
                        <a href="#" class="f6">乐购</a>
                        ，请
                        <a href="#" class="bf">登陆</a>
                        \
                        <a href="#" class="f6">注册</a>
                    </span>
                </div>
            </div>
            <!-- 搜索框 -->
            <div class="search-box container cf">
                <a href="#" class="fr">我的订单</a>
                <a href="#" class="fr">购物车 3</a>
                <div class="search-bnt fr">
                    <input type="text">
                    <button type="button">搜索</button>
                </div>
    
            </div>
            <!-- 导航栏+logo -->
            <div class="nav-logo container cf">
                <img src="./images/logo.jpg" alt="1">
                <ul>
                    <li><a href="#">图书</a></li>
                    <li><a href="#">电子书</a></li>
                    <li><a href="#">原创文学</a></li>
                    <li><a href="#">服装</a></li>
                    <li><a href="#">运动户外</a></li>
                    <li><a href="#">孕婴童</a></li>
                    <li><a href="#">家居</a></li>
                    <li><a href="#">创意文具</a></li>
                    <li><a href="#">地方特产</a></li>
                    <li><a href="#">海外购</a></li>
                    <li><a href="#">电器城</a></li>
                </ul>
            </div>
        </header>




        <main class="container">
            <!-- 头部 -->
            <div class="top">
                <p><a href="#">图书</a> &gt; <a href="#">小说</a> &gt; <a href="#">情感/家庭/婚姻</a> &gt;  <a href="#">博集天卷</a> &gt; <a href="#">她和他</a></p>
            </div>
            <!-- 加入购物车 -->
            <div class="product-details">
                <div class="left">
                    <div class="magnifier" id="magnifier1">
                        <div class="magnifier-container">
                            <div class="images-cover"></div>
                            <!--当前图片显示容器-->
                            <div class="move-view"></div>
                            <!--跟随鼠标移动的盒子-->
                        </div>
                        <div class="magnifier-assembly">
                            <div class="magnifier-btn">
                                <span class="magnifier-btn-left">&lt;</span>
                                <span class="magnifier-btn-right">&gt;</span>
                            </div>
                            <!--按钮组-->
                            <div class="magnifier-line">
                                <ul class="clearfix animation03">
                                    <li>
                                        <div class="small-img">
                                            <img src="images/01.jpg" />
                                        </div>
                                    </li>
                                    <li>
                                        <div class="small-img">
                                            <img src="images/02.jpg" />
                                        </div>
                                    </li>
                                    <li>
                                        <div class="small-img">
                                            <img src="images/03.jpg" />
                                        </div>
                                    </li>
                                    <li>
                                        <div class="small-img">
                                            <img src="images/04.jpg" />
                                        </div>
                                    </li>
                                    <li>
                                        <div class="small-img">
                                            <img src="images/05.jpg" />
                                        </div>
                                    </li>
                                    <li>
                                        <div class="small-img">
                                            <img src="images/06.jpg" />
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <!--缩略图-->
                        </div>
                        <div class="magnifier-view"></div>
                        <!--经过放大的图片显示容器-->
                    </div>
                </div>
                <div class="right">
                    <p>她和他</p>
                    <p>《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
                    <p>[法] 马克·李维 著；杨亦雨 译</p>
                    <div class="cf">
                        <div class="left fl">
                            <p>乐 购 价：<span class="f8">￥26.20</span> [6.9折] [定价：￥38.00] (降价通知)</p>
                            <p>促销信息：<span class="f8">满减 每满150.00元，可减50.00元现金</span>   详情 >></p>
                            <div class="bottom">
                                <p>领 券：</p>
                                <div>100-6</div>
                                <div>100-6</div>
                            </div>
                        </div>
                        <div class="right fr">
                            <p>累计评价<br><span class="f6">99999</span></p>
                        </div>
                    </div>
                    <div>
                        <p>种类选择：</p>
                        <span class="on">平装版</span>
                        <span>精装版</span>
                    </div>
                    <div>
                        <div class="num">
                            <p>1</p>
                            <button type="button">-</button>
                            <button type="button">+</button>
                        </div>
                        <button type="button">加入购物车</button>
                    </div>
                    <p>
                        温馨提示：支持7天无理由退货
                    </p>
                </div>
            </div>
            <!-- 人气单品 -->
            <div class="cengol">
                <h3><span>人气单品</span></h3>
                <div class="content">
               <script>
                   for(let i=0;i<5;i++){
                       document.write(`
                            <div class="bookbox">
                                <img src="./images/22935553-1_l.jpg"  alt="1">
                                <img src="./images/8zhe.jpg" alt="1">
                                <p class="f3">白夜行  东野上吾</p>
                                <span class="f6">推荐：
                                    <div>
                                        <div></div>
                                    </div>
                                </span>
                                <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                            </div>
                       `)
                   }
               </script>
                </div>
            </div>
            <!-- 评论区 -->
            <div class="comment">
                <div class="left">
                    <p>看了又看</p>
                    <div class="content">
                        <script>
                            for(let i=0;i<7;i++){
                                document.write(`
                                <div class="bookbox">
                                    <img src="./images/22935553-1_l.jpg"  alt="1">
                                    <img src="./images/8zhe.jpg" alt="1">
                                    <p class="f3">白夜行  东野上吾</p>
                                    <span class="f6">推荐：
                                        <div>
                                            <div></div>
                                        </div>
                                    </span>
                                    <p class="f6">￥:38 <del class="fc0">￥:58</del></p>
                                </div>
                                `)
                            }
                        </script>
                    </div>
                    
                </div>
                <div class="right">
                    <div class="top">
                        <span>商品介绍</span>
                        <span class="on">评价（9999）</span>
                    </div>
                    <div class="picture">
                        <img src="./images/picture.jpg" alt="1">
                    </div>
                    <div class="picture on">
                    <div class="good">
                        <div class="left">
                            <p>98%</p>
                            <p>好评度</p>
                        </div>
                        <div class="miiden">
                            <p>好评(98%)<span><span></span></span></p>
                            <p>中评(2%)<span><span></span></span></p>
                            <p>差评(0%)<span><span></span></span></p>
                        </div>
                        <div class="right">
                            <div>
                                <span>1.洲**子&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+0 </span>
                                <span>2.洲**子&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+0 </span>
                            </div>
                            <div>
                                <span>3.洲**子&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+10 </span>
                            <span>4.洲**子&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+10 </span>
                            </div>
                        </div>
                    </div>
                    <div class="nav">
                        <a href="#">全部评价（9999）</a>
                        <a href="#">好评（888）</a>
                        <a href="#">中评（888）</a>
                        <a href="#">差评（888）</a>
                    </div>
                    <script>
                        for(let i=0;i<12;i++){
                            document.write(`
                            <div class="comment-2">
                                <div class="left">
                                    <div><div></div></div>
                                    <p>下单后5天评论</p>
                                    <p>2016-08-11</p>
                                </div>
                                <div class="midden">
                                    <p>书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关键是价格真给力</p>
                                </div>
                                <div class="right">
                                    <div><img src="./images/pinlun.jpg" alt="">洲**子</div>
                                    <p class="fy">金牌会员</p>
                                    <p>来自iPhone客户端</p>
                                </div>
                            </div>
                        `)
                            }
                    </script>
                    </div>
                </div>
            </div>
            <!-- 广告 -->
            <div class="guanggao">
                <img src="./images/guangao.jpg" alt="">
            </div>









        </main>



        <!-- 页脚 -->
     <div class="line"></div>
    <footer>
        
        <div class="top">
            <img src="./images/222_11.png" alt="1">
            <img src="./images/222_13.png" alt="1">
            <img src="./images/222_15.png" alt="1">
            <img src="./images/222_17.png" alt="1">
        </div>
        <div class="bot">
            <div>
                <span>购物指南</span>
                <p>购物流程</p>
                <p>发票制度</p>
                <p>账户管理</p>
                <p>会员优惠</p>
            </div>
            <div>
                <span>支付方式</span>
                <p>货到付款</p>
                <p>网上支付</p>
                <p>礼品卡支付</p>
                <p>银行转帐</p>
            </div>
            <div>
                <span>订单服务</span>
                <p>订单配送查询</p>
                <p>订单状态说明</p>
                <p>自助取消订单</p>
                <p>自助修改订单</p>
            </div>
            <div>
                <span>商家服务</span>
                <p>商家中心</p>
                <p>运营服务</p>
                <p>加入尾品汇</p>
            </div>
            <div class="logo"><img src="./images/logo_00.png" alt="1"></div>
        </div>
        <p><a href="#">公司简介</a> | <a href="#">Investor Relations</a> | <a href="#">网站联盟</a> | <a href="#">乐购招商</a> | <a
                href="#">机构销售</a> | <a href="#">手机乐购</a> | <a href="#">官方Blog</a> | <a href="#">热词搜索</a></p>
        <div class="last"><span> Copyright (C) 乐购网 2004-2016, All Rights Reserved</span> </div>

    </footer>
</body>



<script src="./lib/jquery-1.11.0.js"></script>
<script src="./lib/bnner/slider.js"></script>
<script src="./lib/zoom/magnifier.js"></script>
<script src="./js/details.js"></script>
</html>